<template>
  <view class="withdrawal">
    <topTitle title="提現" />
    <view class="com">
      <view class="bank" @tap="openBankCard">
        <view>到帳銀行</view>
        <view>
          <view v-if="getBankCardObj.id">
            {{ getBankCardObj.bank_name }}
            ({{ getLastFourChars(getBankCardObj.card_number) }})
          </view>

          <text v-if="!getBankCardObj.id">請添加銀行卡</text>
        </view>
      </view>
      <view class="operate">
        <view>提現金額</view>
        <view class="ipt">
          <up-input
            v-model="money"
            maxlength
            type="number"
            border="none"
            fontSize="40"
          >
            <template #prefix> <text>$ </text></template>
            <template #suffix>
              <text class="all" @click="money = balance">全部提現 </text>
            </template>
          </up-input>
        </view>
        <view class="tips">
          <view
            >1、當前帳戶餘額：${{ balance }}，最低提現：${{
              withdrawalConfigObj.single_min
            }}</view
          >
          <view
            >2、每日{{ withdrawalConfigObj.start_time }}-{{
              withdrawalConfigObj.end_time
            }}方可提现，且每日可提现{{ withdrawalConfigObj.frequency }}次</view
          >
        </view>
        <up-button
          :disabled="!money"
          text="確認"
          @tap="withdrawalFn"
          type="primary"
        ></up-button>
      </view>
    </view>
    <bankCard @getBankCardObjFn="getBankCardObjFn" ref="bankCardRef" />
    <psw
      ref="pswRef"
      @pswFinish="pswFinish"
      tips="添加銀行卡"
      title="請輸入支付密碼，以驗證身份"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
const instance = getCurrentInstance()?.appContext.config.globalProperties;

import { WithdrawalConfig } from "@/api/SystemApi";
import { UserMoney, UserWithdrawal } from "@/api/UserApi";

import bankCard from "./components/bankCard.vue";

let money = ref<number | string>();
let pswRef = ref<any>(null);

const withdrawalFn = () => {
  if (!getBankCardObj.value.id) {
    uni.showToast({ title: "请选择银行卡", icon: "none" });
    return;
  }
  if (withdrawalConfigObj.value.single_min > Number(money.value || 0)) {
    uni.showToast({
      title: "最低提现" + withdrawalConfigObj.value.single_min,
      icon: "none",
    });
    return;
  }
  if (Number(money.value || 0) > balance.value) {
    uni.showToast({
      title: "余额不足",
      icon: "none",
    });
    return;
  }
  pswRef.value.openPsw();
};

const pswFinish = async (payment_password: string) => {
  await UserWithdrawal({
    money: money.value,
    id: getBankCardObj.value.id,
    payment_password,
    loading: 1,
  });

  instance?.goRedirectTo("/pages/myWallet/submitSuccessfully?type=2");
  money.value = "";
};

let bankCardRef = ref<any>(null);
const openBankCard = () => {
  bankCardRef.value.openBankCard();
};
let getBankCardObj = ref<any>({});
const getBankCardObjFn = (e: any) => {
  getBankCardObj.value = e;
};

// 获取余额
let balance = ref<number>(0);
const UserMoneyFn = async () => {
  balance.value = await UserMoney();
};
UserMoneyFn();

// 获取配置
let withdrawalConfigObj = ref<any>({});
const getWithdrawalConfigFn = async () => {
  if (uni.getStorageSync("WithdrawalConfig")) {
    withdrawalConfigObj.value = uni.getStorageSync("WithdrawalConfig");
  }
  let obj = await WithdrawalConfig();
  withdrawalConfigObj.value = obj;
};
getWithdrawalConfigFn();
</script>
<style scoped lang="scss">
@import "../../static/scss/myWallet.scss";
</style>
